<template>
    <div class="productList-empty">
        <img src="https://img.podpartner.com/static/images-20230202/listEmpty.png" alt="" />
        <p>No content found</p>
        <p class="btn" @click="toProduct">Browse products</p>
    </div>
</template>
<script>
export default {
    name: "productList-empty",
    data () {
        return {};
    },
    methods: {
        toProduct () {
            let path = this.$route.path + "";
            this.$router
                .replace({
                    path,
                    query: { dataType: "product" },
                })
                .catch(() => { });
        },
    },
};
</script>
<style lang="scss" scoped>
.productList-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img {
        width: 264px;
        height: 180px;
        margin: 0 0 96px 0;
    }
    font-size: 16px;
    color: #aaaaaa;
    .btn {
        &:hover {
            color: #ea4c89;
            border-color: #ea4c89;
        }
        cursor: pointer;
        margin: 20px 0 0 0;
        width: 238px;
        height: 52px;
        background: #ffffff;
        border-radius: 11px;
        border: 1px solid #d9d9d9;
        line-height: 52px;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: #000000;
    }
}
</style>
